<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="输入文字" style="width: 200px; margin-right: 20px"
        class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.type" placeholder="文字黑白名单" clearable class="filter-item"
        style="width: 200px; margin-right: 20px">
        <el-option v-for="item in Text_value_" :key="item.type" :label="item.value" :value="item.type" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="query_white">
        搜索
      </el-button>
      <el-button class="filter-item" style="float: right" type="primary" icon="el-icon-edit"
        @click="dialogVisible = true">
        添加文字黑白名单
      </el-button>
    </div>

    <el-table :data="list" stripe style="width: 1060px" border>
      <el-table-column prop="id" label="ID" width="100" align="center" />
      <el-table-column prop="content" label="关键字" width="200" align="center" />
      <el-table-column prop="type" label="类型" width="200" align="center">
        <template slot-scope="scope" align="center">
          <span>{{scope.row.type=='1'?'白名单':'黑名单'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="添加时间" align="center" width="300" />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="scope" align="center">
          <el-button type="primary" size="small" @click="editClick(scope.row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加文字黑白名单" :visible.sync="dialogVisible" width="400px" center>
      <el-input v-model="text" placeholder="输入关键字" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 100%" @click="AddWhitelist">确 定</el-button>
      </span>
      <div class="center_radio">
        <span>添加至 ：</span>
        <div>
          <el-radio v-model="type" label="1">白名单</el-radio>
          <el-radio v-model="type" label="2">黑名单</el-radio>
        </div>
      </div>
    </el-dialog>

    <pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize" @pagination="handleFilter" />
  </div>
</template>

<script>
  import {
    encryption2
  } from '@/api/index'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    data() {
      return {
        dialogVisible: false,
        listQuery: {
          keyword: '',
          type: '',
          total: 0,
          pageNo: 1,
          pageSize: 10,
        },
        type: '1',
        list: [],
        Text_value_: [{
            type: 1,
            value: "文字白名单"
          },
          {
            type: 2,
            value: "文字黑名单"
          }
        ],
        text: ''
      }
    },
    created() {
      this.handleFilter()
    },
    methods: {
      // 确认添加
      AddWhitelist() {
        if (!this.text) {
          return this.$message({
            message: '搜索框不能为空',
            type: 'error'
          })
        }
        const arys = {
          text: this.text,
          type: this.type
        }
        const url = '/audit/textBlackWhiteAdd'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: res.data.text,
              type: 'success'
            })
            this.handleFilter()
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
          this.text = ''
          this.dialogVisible = false
        })
      },
      //   移除提示
      editClick(row) {
        const _ = this
        this.$confirm(`确认移除关键词: ${row.content} 吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            _.editwhite(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 确认移除名单
      editwhite(row) {
        const arys = {
          id: row.id
        }
        const url = '/audit/textBlackWhiteDel'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: res.data.text,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
            this.handleFilter()
        })
      },
      query_white() {
        (this.listQuery.pageNo = 1), this.handleFilter()
      },
      // 查询
      handleFilter() {
        const arys = {
          type: this.listQuery.type,
          keyword: this.listQuery.keyword,
          page: this.listQuery.pageNo,
          pageSize: this.listQuery.pageSize
        }
        const url = '/audit/textBlackWhiteList'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.list = res.data.result.list
            this.listQuery.total = res.data.result.total
            // this.$message({
            //   message: res.data.text,
            //   type: "success",
            // });
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .filter-container {
    width: 1060px;
  }

  .center_radio {
    width: 88%;
    justify-content: center;
    display: flex;
    margin-top: 20px;
  }

  .center_radio>div {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
</style>